<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html  class="x-admin-sm">
<head>
	<meta charset="UTF-8">
	<title>图书馆座位预定</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/login.css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/admin/lib/layui/layui.js" charset="utf-8"></script>
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->	
    
    <style>
    .code
    {
         font-family:Arial;
         font-style:italic;
         color:blue;
         font-size:30px;
         border:0;
         padding:2px 3px;
         letter-spacing:3px;
         font-weight:bolder;            
         float:left;           
         cursor:pointer;
         width:150px;
         height:50px;
         line-height:60px;
         text-align:center;
         vertical-align:middle;
         background-color:#D8B7E3;
     }
     span {
        position:absolute;
     	bottom:192px;
        text-decoration:none;
        font-size:12px;
        color:#288bc4;
        padding-left:20px;
    }

    span:hover {
        text-decoration:underline;
        cursor:pointer;
    }
   
</style>
</head>
<script>
    //页面加载时，生成随机验证码
    window.onload=function(){
     createCode(4);    
    }

    //生成验证码的方法
    function createCode(length) {
        var code = "";
        var codeLength = parseInt(length); //验证码的长度
        var checkCode = document.getElementById("checkCode");
        ////所有候选组成验证码的字符，当然也可以用中文的
        var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); 
        //循环组成验证码的字符串
        for (var i = 0; i < codeLength; i++)
        {
            //获取随机验证码下标
            var charNum = Math.floor(Math.random() * 62);
            //组合成指定字符验证码
            code += codeChars[charNum];
        }
        if (checkCode)
        {
            //为验证码区域添加样式名
            checkCode.className = "code";
            //将生成验证码赋值到显示区
            checkCode.innerHTML = code;
        }
        $('.code1').val(code);
        //alert( $('.code1').val());
    }
      
</script>
<body class="login-bg">
    
    <div class="login layui-anim layui-anim-up">
        <div class="message">图书馆座位预定-管理登录</div>
        <div id="darkbannerwrap"></div>
        
        <form action="login" method="post" class="layui-form" >
        	<input type="hidden" class="code1" name="codeName">
            <input name="userName" placeholder="用户名"  type="text" lay-verify="required" class="layui-input userName" > 
            <hr class="hr15">
            <input name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input password">
            <hr class="hr15">
           	<div id="checkCode" class="code"  onclick="createCode(4)" ></div>
           	<span onclick="createCode(4)">看不清换一张</span>
           	<hr class="hr15">
           	<input placeholder="验证码（区分大小写）" type="text" id="inputCode" name="codeNamev" style="float:left;" />
           	<hr class="hr15">
            <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>
    </div>

    <script>
        //$(function  () {
           // layui.use('form', function(){
             // var form = layui.form;
              // layer.msg('玩命卖萌中', function(){
              //   //关闭后的操作
              //   });
              //监听提交
             // form.on('submit(login)', function(data){
            	  
            	//  $.ajax({
                  //    url : './../login',
                  //  /  type : 'post',
                  //    dataType : 'json',
                     // contentType :"application/json",
                     // data : {
                    	//  userName:$('.userName').val(),
            	         // password:$('.password').val()
                    //  },//
                   //   success : function (data1) {
                    	  
                    //  }
//})
                 
                 // return false;
               
             // });
           // });
       // })
    </script>
    <!-- 底部结束 -->
    <script>
    //百度统计可去掉
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
</body>
</html>